<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="show = true">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>单词汇总</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'  v-if="tabs == 1">
					<text class="select_all" @tap.stop="selectAll">全选</text>
					<text class="print" @tap.stop="bluetoothPrint">蓝牙打印</text>
					<text class="end_train" @tap.stop="print">后台打印</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'  v-if="tabs == 2">
					<text class="end_train" @tap.stop="selectAll">全选</text>
				</view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		
			<view class="list">
				<view class="tabs">
					<view class="tabs_item" :class="tabs == 1 ? 'active_item' : ''" @tap.stop="selectTabs(1)">
						<text>练后汇总</text>
						<text class="tabs_line" v-if="tabs == 1"></text>
					</view>
					<view class="tabs_item" :class="tabs == 2 ? 'active_item' : ''" @tap.stop="selectTabs(2)">
						<text>会</text>
						<text class="tabs_line" v-if="tabs == 2"></text>
					</view>
				</view>
				<view class="loading_css" v-if="isShow">
					<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
					<view>加载中</view>
				</view>
				<template v-else>
					<template v-if="tabs == 1">
						<view class="list_item" v-for="(item,index) in not_meet_list" :key="index">
							<view class="item_left" @tap.stop="clickWord(index)">
								<view v-if="item.clickNum == 0">
									<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
								</view>
								<view v-if="item.clickNum == 1 || item.clickNum == 2" class="active_item_text">
									<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
								</view>
								<!-- <view v-if="item.clickNum == 0">{{item.word}}</view>
								<view v-if="item.clickNum == 1 || item.clickNum == 2" class="active_item_text">{{item.word}}
								</view> -->
								<!-- <image v-if="item.clickNum == 1" class="see_img" :src='STATIC_URL+"40.png"' mode="aspectFill">
								</image> -->
								<view v-if="item.clickNum == 3" class="item_hide">
									<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
								</view>
								<view v-if="item.clickNum == 2" class="item_tips">{{item.c_word}}</view>
							</view>
							<view class="item_right">
								<view class="see_right_item" @tap.stop="selectAnswer(index, 1)">
									<image v-if="item.is_meet == 1" :src='STATIC_URL+"10.png"' mode=""></image>
									<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
									<text>会</text>
								</view>
								<view class="see_right_item" @tap.stop="selectAnswer(index, 2)">
									<image v-if="item.is_meet == 2" :src='STATIC_URL+"37.png"' mode=""></image>
									<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
									<text>不会</text>
								</view>
							</view>
						</view>
					</template>
					<template v-if="tabs == 2">
						<view class="list_item" v-for="(item,index) in meet_list" :key="index">
							<view class="item_left" @tap.stop="clickWord(index)">
								<view v-if="item.clickNum == 0">
									<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
								</view>
								<view v-if="item.clickNum == 1 || item.clickNum == 2" class="active_item_text">
									<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
								</view>
								<!-- <view v-if="item.clickNum == 0">{{item.word}}</view>
								<view v-if="item.clickNum == 1 || item.clickNum == 2" class="active_item_text">{{item.word}}
								</view>
								<image v-if="item.clickNum == 1" class="see_img" :src='STATIC_URL+"40.png"' mode="aspectFill">
								</image>
								<view v-if="item.clickNum == 3" class="item_hide">{{item.word}}</view> -->
								<view v-if="item.clickNum == 3" class="item_hide">
									<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
								</view>
								<view v-if="item.clickNum == 2" class="item_tips">{{item.c_word}}</view>
							</view>
							<view class="item_right">
								<view class="see_right_item" @tap.stop="selectAnswer(index, 1)">
									<image v-if="item.is_meet == 1" :src='STATIC_URL+"10.png"' mode=""></image>
									<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
									<text>会</text>
								</view>
								<view class="see_right_item" @tap.stop="selectAnswer(index, 2)">
									<image v-if="item.is_meet == 2" :src='STATIC_URL+"37.png"' mode=""></image>
									<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
									<text>不会</text>
								</view>
							</view>
						</view>
					</template>
				</template>
				
				
			</view>
			
			<view class="bottom_info" v-if="!isShow">
				<view class="bottom_info_left">
					<template v-if="tabs == 1">
						<view class="">
							总数{{tabs1_total}}
							<text class="bottom_info_left_line">l</text>
							错误{{notNum}}
							<text class="bottom_info_left_line">l</text>
							正确{{meetNum}}
						</view>
					</template>
					<template v-if="tabs == 2">
						<view class="">
							总数{{tabs2_total}}
							<text class="bottom_info_left_line">l</text>
							错误{{notTwoNum}}
							<text class="bottom_info_left_line">l</text>
							正确{{meetTwoNum}}
						</view>
					</template>
					<view class="bottom_info_left_text" @tap.stop="getNext">
						<text>提交或打印本页数据并进入下一页</text>
						<image :src='STATIC_URL+"12.png"' mode=""></image>
					</view>
				</view>
				<view class="bottom_info_right" @tap.stop="submitWord">
					开始标识
				</view>
			</view>
		
		<view style="height: 120rpx;"></view>
		
		<view class="noData" v-if="not_meet_list.length == 0 && tabs == 1 && !isShow">
			<image :src='STATIC_URL+"no.png"' mode="aspectFill"></image>
		</view>
		
		<view class="noData" v-if="meet_list.length == 0 && tabs == 2 && !isShow">
			<image :src='STATIC_URL+"no.png"' mode="aspectFill"></image>
		</view>
		<uv-modal width="300rpx" :showCancelButton="true" :closeOnClickOverlay="false" confirmColor="#4087FD" ref="modal" title="提示" :content='content' align="center" @confirm="confirm" :textStyle="{fontSize: 20 + 'px'}"></uv-modal>
		
		<overlay ref="tips" :tips="tips"></overlay>
		
		<uv-overlay :show="show">
			<view class="warp">
				<view class="rect">
					<view class="video_text">
						<view class="video_text_1">确定要退出当前页面吗？</view>
						<!-- <view class="video_text_2">请继续完成训练</view> -->
					</view>
					<view class="input_bottom">
						<view class="input_bottom_1" @click="show = false">取消</view>
						<view class="input_bottom_2" @click="confirmBack">确定</view>
					</view>
				</view>
			</view>
		</uv-overlay>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import overlay from "@/components/overlay/overlay.vue"
	import {highlightedText} from "@/common/utils/utils.js"
	
	export default {
		components: {
			overlay
		},


		data() {
			return {
				"show": false,
				"data": [],
				"tips": "复习完成",
				"content": "确定提交后台打印？",
				"tabs": 1,
				"aid": "",
				"innerAudioContext": null,
				
				"isShow": true,
				"list": [],
				"record_id": "7", // 训练id
				"tips": "",
				"page": 1,
				"last_page": 1,
				"not_last_page": 1,
				
				"languageType": 1, // 英语类型  1美式 2英式
				"meetNum": 0, // 会的单词数量
				"notNum": 0, // 不会的单词数量
				"meetTwoNum": 0,
				"notTwoNum": 0,
				"is_click": false,
				"clickNum": 0, // 单词点击次数
				"not_meet_list": [],  // 汇总
				"meet_list": [],  // 会
				"wordlist_info": [],  // 选择的答案
				"tabs1_total": 0,
				"tabs2_total": 0,
				"wordlist_ids": [],  // 要打印的数据列表
				"one_index": -1,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onBackPress(options) {
		 if (options.from === 'navigateBack') {
		 		return false;
		 	}
		 	// 这里使用重定向比较好，不信可以自己多试几种，其余跳转方法在文章底部哦
		 	this.show = true;
		 	return true;
		},
		onLoad(options) {
			let { aid } = options;
			if (aid !== undefined) this.aid = aid;
			this.getList();
		},
		onUnload() {

		},
		onReady() {
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		onShow() {
			this.languageType = uni.getStorageSync('languageType');
			// this.page = 1;
			// this.is_pull = true;
			// this.isShow = true;
			// this.getList();
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			// this.page = 1;
			// this.is_pull = true;
			// this.isShow = true;
			// this.getList();
		},
		// 上拉加载
		onReachBottom() {
		// 	if (this.page >= this.last_page) return;
		// 	this.status = 'loading';
		// 	this.page++;
		// 	setTimeout(() => {
		
		// 		if (this.page >= this.last_page) this.status = 'nomore';
		// 		else this.status = 'loading';
		// 		this.is_pull = false;
		// 		this.getList();
		// 	}, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			fileText(text, syllable) {
				return highlightedText(text, syllable);
			},
			selectTabs(type) {
				this.tabs = type;
			},
			getNext() {
				if (this.tabs == 1) {
					if (this.page < this.not_last_page) {
						this.page += 1;
						this.isShow = true;
						this.getList();
					}
				} else {
					if (this.page < this.last_page) {
						this.page += 1;
						this.isShow = true;
						this.getList();
					}
				}
			},
			// 获取海马体3单词汇总  post657176c951fb2
			getList() {
				this.$api.post(global.apiUrls.post657176c951fb2, {
					page: this.page,
					aid: this.aid
				}).then(res => {
					console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.tabs1_total = res.data.data.not_meet_list.total;
						this.tabs2_total = res.data.data.meet_list.total;
						if (res.data.data.not_meet_list.data.length > 0) {
							res.data.data.not_meet_list.data.forEach((v, k) => {
								v.clickNum = 0;
								v.is_meet = 0;
							})
						}
						if (res.data.data.meet_list.data.length > 0) {
							res.data.data.meet_list.data.forEach((v, k) => {
								v.clickNum = 0;
								v.is_meet = 0;
							})
						}
						this.not_meet_list = res.data.data.not_meet_list.data;
						this.not_last_page = res.data.data.not_meet_list.last_page;
						this.meet_list = res.data.data.meet_list.data;
						this.last_page = res.data.data.meet_list.last_page;
						if (this.not_meet_list.length == 0 && this.meet_list.length == 0) {
							this.tips = '复习完成';
							this.$refs.tips.open();
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/antiForget/summaryReinforcement?aid=' + this.aid
								})
							}, 800)
							return;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectAnswer(index, type) {
				if (this.tabs == 1) {
					this.not_meet_list[index].is_meet = type;
					this.meetNum = this.not_meet_list.filter(u => u.is_meet == 1).length;
					this.notNum = this.not_meet_list.filter(u => u.is_meet == 2).length;
					this.$forceUpdate();
				} else if (this.tabs == 2) {
					this.meet_list[index].is_meet = type;
					this.meetTwoNum = this.meet_list.filter(u => u.is_meet == 1).length;
					this.notTwoNum = this.meet_list.filter(u => u.is_meet == 2).length;
					this.$forceUpdate();
				}
				
			},
			
			// 单词点击次数
			clickWord(index) {
				if (index != this.one_index) {
					if (this.not_meet_list.length > 0) {
						this.not_meet_list.forEach((v, k) => {
							v.clickNum = 0;
						})
					}
					if (this.meet_list.length > 0) {
						this.meet_list.forEach((v, k) => {
							v.clickNum = 0;
						})
					}
				}
				this.one_index = index;
				if (this.tabs == 1) {
					if (this.not_meet_list[index].clickNum == 3) {
						this.not_meet_list[index].clickNum = 1;
					} else {
						this.not_meet_list[index].clickNum += 1;
					}
					if (this.innerAudioContext) {
						this.innerAudioContext.destroy();
					}
					this.innerAudioContext = null;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					if (this.languageType == 1) {
						this.innerAudioContext.src = this.not_meet_list[this.one_index].american_accent;
					} else {
						this.innerAudioContext.src = this.not_meet_list[this.one_index].british_accent;
					}
						
					this.innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					this.innerAudioContext.onError((res) => {
						this.not_meet_list[this.one_index].clickNum = 0;
						this.$message.info('播放失败，请重试');
						console.log(res.errMsg);
						console.log(res.errCode);
					});
					this.$forceUpdate();
					return;
					
					// if (this.not_meet_list[index].clickNum == 3) {
					// 	return;
					// } else {
					// 	this.not_meet_list[index].clickNum += 1;
					// 	if (this.not_meet_list[index].clickNum == 1) {
					// 		if (this.innerAudioContext) {
					// 			this.innerAudioContext.destroy();
					// 		}
					// 		this.innerAudioContext = null;
					// 		this.innerAudioContext = uni.createInnerAudioContext();
					// 		this.innerAudioContext.autoplay = true;
					// 		if (this.languageType == 1) {
					// 			this.innerAudioContext.src = this.not_meet_list[index].american_accent;
					// 		} else {
					// 			this.innerAudioContext.src = this.not_meet_list[index].british_accent;
					// 		}
								
					// 		this.innerAudioContext.onPlay(() => {
					// 			console.log('开始播放');
					// 		});
					// 		this.innerAudioContext.onError((res) => {
					// 			this.not_meet_list[index].clickNum = 0;
					// 			this.$message.info('播放失败，请重试');
					// 			console.log(res.errMsg);
					// 			console.log(res.errCode);
					// 		});
					// 	}
					// 	this.$forceUpdate();
					// }
				} else if (this.tabs == 2) {
					if (this.meet_list[this.one_index].clickNum == 3) {
						this.meet_list[this.one_index].clickNum = 1;
					} else {
						this.meet_list[this.one_index].clickNum += 1;
					}
					if (this.innerAudioContext) {
						this.innerAudioContext.destroy();
					}
					this.innerAudioContext = null;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					if (this.languageType == 1) {
						this.innerAudioContext.src = this.meet_list[this.one_index].american_accent;
					} else {
						this.innerAudioContext.src = this.meet_list[this.one_index].british_accent;
					}
						
					this.innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					this.innerAudioContext.onError((res) => {
						this.meet_list[this.one_index].clickNum = 0;
						this.$message.info('播放失败，请重试');
						console.log(res.errMsg);
						console.log(res.errCode);
					});
					this.$forceUpdate();
					return;
					// if (this.meet_list[index].clickNum == 3) {
					// 	return;
					// } else {
					// 	this.meet_list[index].clickNum += 1;
					// 	if (this.meet_list[index].clickNum == 1) {
					// 		if (this.innerAudioContext) {
					// 			this.innerAudioContext.destroy();
					// 		}
					// 		this.innerAudioContext = null;
					// 		this.innerAudioContext = uni.createInnerAudioContext();
					// 		this.innerAudioContext.autoplay = true;
					// 		if (this.languageType == 1) {
					// 			this.innerAudioContext.src = this.meet_list[index].american_accent;
					// 		} else {
					// 			this.innerAudioContext.src = this.meet_list[index].british_accent;
					// 		}
								
					// 		this.innerAudioContext.onPlay(() => {
					// 			console.log('开始播放');
					// 		});
					// 		this.innerAudioContext.onError((res) => {
					// 			this.meet_list[index].clickNum = 0;
					// 			this.$message.info('播放失败，请重试');
					// 			console.log(res.errMsg);
					// 			console.log(res.errCode);
					// 		});
					// 	}
					// 	this.$forceUpdate();
					// }
				}
			},
			submitWord() {
				if (this.tabs == 1) {
					if (this.not_meet_list.length > 0) {
						this.wordlist_info = [];
						this.not_meet_list.forEach((v, k) => {
							if (v.is_meet == 1 || v.is_meet == 2) {
								this.wordlist_info.push({
									wordlist_id: v.aid,
									is_meet: v.is_meet
								})
							}
						})
					} else {
						return;
					}
				} else if (this.tabs == 2) {
					if (this.meet_list.length > 0) {
						this.wordlist_info = [];
						this.meet_list.forEach((v, k) => {
							if (v.is_meet == 1 || v.is_meet == 2) {
								this.wordlist_info.push({
									wordlist_id: v.aid,
									is_meet: v.is_meet
								})
							}
						})
					} else {
						return;
					}
				}
				if (this.wordlist_info.length == 0) {
					this.$message.info('请选择单词标识');
					return;
				}
				this.$api.post(global.apiUrls.post65717fc5abf3a, {
					record_id: this.aid,
					wordlist_info: JSON.stringify(this.wordlist_info)
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						// this.getList();
						this.$message.info('提交成功');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/antiForget/summaryReinforcement?aid=' + this.aid
							})
						}, 800)
					} else if (res.data.code == 0) {
						this.$message.info(res.data.msg);
					}
				})
			},
			
			// 全选按钮
			selectAll() {
				if (this.tabs == 1) {
					if (this.not_meet_list.length > 0) {
						this.not_meet_list.forEach((v, k) => {
							v.is_meet = 2;
						})
						this.meetNum = this.not_meet_list.filter(u => u.is_meet == 1).length;
						this.notNum = this.not_meet_list.filter(u => u.is_meet == 2).length;
					}
				} else if (this.tabs == 2) {
					if (this.meet_list.length > 0) {
						this.meet_list.forEach((v, k) => {
							v.is_meet = 2;
						})
						this.meetTwoNum = this.meet_list.filter(u => u.is_meet == 1).length;
						this.notTwoNum = this.meet_list.filter(u => u.is_meet == 2).length;
					}
				}
				this.$forceUpdate();
			},
			
			// 蓝牙打印
			bluetoothPrint() {
				let wordlist_ids = [];
				if (this.tabs == 1) {
					if (this.not_meet_list.length > 0) {
						this.not_meet_list.forEach((v, k) => {
							if (v.is_meet == 2) {
								wordlist_ids.push(v.aid);
							}
						})
					}
				} else if (this.tabs == 2) {
					if (this.meet_list.length > 0) {
						this.meet_list.forEach((v, k) => {
							if (v.is_meet == 2) {
								wordlist_ids.push(v.aid);
							}
						})
					}
				}
				if (wordlist_ids.length == 0) {
					this.$message.info('请选择要打印的单词');
					return;
				}
				this.wordlist_ids = wordlist_ids.join(',');
				global.wordlist_ids = this.wordlist_ids;
				uni.navigateTo({
					url: '/pages/index/print/wordTwo?id=' + this.aid + '&prinType=3'
				})
			},
			// 提交后台打印
			print() {
				let wordlist_ids = [];
				if (this.tabs == 1) {
					if (this.not_meet_list.length > 0) {
						this.not_meet_list.forEach((v, k) => {
							if (v.is_meet == 2) {
								wordlist_ids.push(v.aid);
							}
						})
					}
				} else if (this.tabs == 2) {
					if (this.meet_list.length > 0) {
						this.meet_list.forEach((v, k) => {
							if (v.is_meet == 2) {
								wordlist_ids.push(v.aid);
							}
						})
					}
				}
				if (wordlist_ids.length == 0) {
					this.$message.info('请选择要打印的单词');
					return;
				}
				this.wordlist_ids = wordlist_ids;
				this.$refs.modal.open();
			},
			confirm() {
				this.$refs.modal.close();
				this.$api.post(global.apiUrls.post6597bbd7c22e5, {
					wordlist_ids: this.wordlist_ids.join(',')
				}).then(res => {
					this.$message.info(res.data.msg);
				})
			},
			confirmBack() {
				this.show = false;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 450rpx;
		height: 240rpx;
		border-radius: 10rpx;
		background-color: #fff;
		text-align: center;
		position: relative;
	}
	
	.input_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1px solid #dddddd;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	
		.input_bottom_1 {
			width: 50%;
			text-align: center;
			font-size: 25rpx;
			color: #999999;
		}
	
		.input_bottom_2 {
			width: 50%;
			text-align: center;
			font-size: 25rpx;
			color: #4087FD;
		}
	}
	
	.video_text {
		padding: 78rpx 0 0;
		text-align: center;
	
		.video_text_1 {
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #333333;
		}
	
		.video_text_2 {
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 12rpx;
		}
	
		.video_text_3 {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			border-top: 1px solid #dddddd;
			padding: 20rpx;
			color: #4087FD;
			font-size: 25rpx;
		}
	}
	
	
	
	.select_all {
		position: absolute;
		right: 225rpx;
		font-size: 20rpx;
	}
	.print {
		position: absolute;
		right: 125rpx;
		font-size: 20rpx;
	}
	.end_train {
		position: absolute;
		right: 25rpx;
		font-size: 20rpx;
	}
	.bottom_info {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 8rpx 25rpx 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		background: #f8f8f8;
		.bottom_info_left {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
			.bottom_info_left_line {
				color: #DDDDDD;
				margin: 0 14rpx;
			}
			.bottom_info_left_text {
				display: flex;
				align-items: center;
				margin-top: 14rpx;
				font-size: 18rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #999999;
				image {
					width: 9rpx;
					height: 15rpx;
					margin-left: 10rpx;
				}
			}
		}
		.bottom_info_right {
			width: 175rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: #4087FD;
			border-radius: 34rpx;
			
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.time_info {
		width: 100%;
		height: 50rpx;
		background: #FA3B3D;
		font-size: 15rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		/deep/.uv-count-down__text {
			color: #fff !important;
			font-size: 15rpx !important;
		}
	}
	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 135rpx;
		.tabs_item {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 20rpx 0;
			position: relative;
		}
		.active_item {
			color: #4087FD;
			font-weight: bold;
		}
		.tabs_line {
			display: inline-block;
			width: 31rpx;
			height: 5rpx;
			background: #4087FD;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	.list {
		margin: 15rpx 25rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 0 20rpx 25rpx;
		.list_item {
			padding: 25rpx 0;
			border-bottom: 1px solid #dddddd;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item_left {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				// font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
				width: 70%;
				.active_item_text {
					// color: #4087FD;
					font-weight: bold;
				}
				.item_tips {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					// color: #999;
					color: #333;
					margin-left: 90rpx;
				}
				.item_hide {
					opacity: 0;
				}
				.see_img {
					width: 25rpx;
					height: 25rpx;
					margin-left: 13rpx;
				}
			}
			.item_right {
				display: flex;
				flex-wrap: wrap;
				justify-self: self-end;
				width: 30%;
				.see_right_item {
					display: flex;
					align-items: center;
					font-size: 18rpx;
					color: #333;
					margin-left: 40rpx;
					image {
						width: 23rpx;
						height: 23rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	
	
	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		// margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>